
  <template>
    <div id="app">
      <Header></Header>
      <NavMenu></NavMenu>
      <div class="viewer">
        <transition :name="transitionName">
          <router-view></router-view>
        </transition>
      </div>
    </div>
  </template>


<script>
  import Header from "@/components/TheHeader/Header.vue";
  import NavMenu from "@/components/NavMenu/NavMenu.vue";
	export default {
		name:'App',
    components: {
      NavMenu,
      Header
    },
		data() {
			return {
        transitionName: ''
			}
		},
    watch: {
      //使用watch 监听$router的变化
      $route(to, from) {
        if (to.meta.index > from.meta.index) {
          //设置动画名称
          this.transitionName = "slide-left";
        } else {
          this.transitionName = "slide-right";
        }
      },
    },
    methods: {
      publishSocketData(e) {
        const data = e && e.detail.data
				if(!data || data.length < 1 ) {
          return
        }
        if(data === 'ping' || data === 'connect success') {
          return
        }
				let res = JSON.parse(data)
        if(this.$route.name !== res.route) {
          this.$router.push({
            name: res.route
          })
        }
      },
    }
	}
</script>



<style lang="scss" scoped>
#app {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.viewer {
  width: 100%;
  height: vh(1790);
  // height: vh(3952);
  overflow: hidden;
}

</style>

  <style>
  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
    will-change: transform;
    transition: all 500ms;
    position: absolute;
  }

  .slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  .slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  .slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  </style>
